<template>
    <div class="userPermissions">
        <div class="satisfy" v-if="userStore.userId == 2">
            <div class="add" @click="addUser(2)">添加用户</div>
            <el-table :data="userStore.userList" stripe style="width: 100%">
                <el-table-column label="序号" width="100" type="index" />
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column prop="age" label="年龄" width="180" />
                <el-table-column prop="status" label="等级" width="180">
                    <template #default="scope">
                        <div class="administrator" v-if="scope.row.status == 2">管理员</div>
                        <div class="common" v-else>普通用户</div>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="changeDrawer(1, scope)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteUser(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="noSatisfy" v-if="userStore.userId != 2">普通用户无法访问当前菜单，请点击右上角切换用户身份</div>
        <Drawer></Drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '../../store';
import { ElMessage } from 'element-plus'
import Drawer from '../../components/drawer/index.vue';
const userStore = useUserStore();

// 删除用户
const deleteUser = (scope) => {
    // console.log(scope);
    userStore.deleteUser(scope.$index, 1);
    ElMessage({
        message: '删除成功',
        type: 'success',
    })
}

// 编辑用户
const changeDrawer = (index, item) => {
    userStore.changeDrawer(index, item);
}

// 添加用户
const addUser = (index, item) => {
    userStore.changeDrawer(index, item);
}
</script>

<style lang="scss" scoped>
.userPermissions {
    width: 100%;
    height: 100%;

    .satisfy {
        border: 1px solid #000;
        border-radius: 10px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        padding: 20px;

        .add {
            display: inline-block;
            padding: 8px 14px;
            color: #fff;
            background-color: #0097ff;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .administrator {
            font-size: 12px;
            display: inline-block;
            padding: 2px 8px;
            color: #67c23a;
            background-color: #e1f3d8;
            border-radius: 5px;
        }

        .common {
            font-size: 12px;
            display: inline-block;
            padding: 2px 8px;
            color: #909399;
            background-color: #f4f4f5;
            border-radius: 5px;
        }

        .el-button {
            padding: 0 10px;
        }
    }

    .noSatisfy {
        width: 100%;
        height: 100%;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>